<template>
      <div class="wrapper">
        <swiper :options="swiperOption">
          <!-- slides -->
          <swiper-slide v-for="item in swiper" :key="item.id"><img :src="item.imgUrl" alt=""></swiper-slide>
          <!-- Optional controls -->
          <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
      </div>
</template>

<script>
    export default {
        name: "HomeSwiper",
        props:{
            swiper:Array
        },
        data () {
            return {
              swiperOption:{
                //和官网swiper配置一模一样
                pagination:".swiper-pagination",
                loop:true,
                autoplay:2000
              },
              // imgUrl:[
              //   {id:"001",
              //    url:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20196/818f6cc784ae6669b74bbbb255414a53.jpg_750x200_66ca5873.jpg"
              //   },{
              //     id:"002",
              //     url:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20195/6ab65be3878a5ea365514cf3a8125fd1.jpg_750x200_7b2fe404.jpg"
              //   },{
              //     id:"003",
              //     url:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20196/e440c31af79c0b9d1a1e84c577205562.jpg_750x200_0729c45b.jpg"
              //   }
              // ]
            }
        }
    }
</script>
<style scoped lang="stylus">
  .wrapper >>> .swiper-pagination-bullet-active{ //样式穿透
    background :#fff;
  }
   .wrapper
      overflow :hidden;
      width: 100%
      height:0;
      padding-bottom:28.6666666666%
      .swiper-slide
         img{
           width: 100%
         }

</style>
